::placeholder{
    color: red;
}

:root{
    --lightColor: #ddd;
    --darkColor: #333;
}

a{
    color: var(--lightColor);
    background: var(--darkColor);
}

@custom-selector :--heading h1, h2, h3, h4, h5, h6;
@custom-selector :--enter :focus,:hover;

a:--enter{
    color: #f40;
}

:--heading{
    font-weight:bold;
}

:--heading.active{
    font-weight:bold;
}

.b{
    color: red;
    & .c{
        color: green;
    }
    & > .c{
        color: blue;
    }
    &:hover{
        color: #000;
    }
}

:root {
    --center: {
        position: absolute;
        left: 50%;
        right: 50%;
        transform: translate(-50%, -50%);
    }
}

.item {
    @apply --center;
}